<template>
  <div
    id="mapInner"
    v-if="houseInfo !== null">
  </div>
</template>

<script>
  import { MP } from './map'
  export default {
    props: {
      houseInfo: {
        type: Object,
        default: {
          name: '成都环球中心',
          location: '成都市高新区环球中心'
        }
      }
    },
    data () {
      return {
        ak: 'OuiuIMM0GUOxkBUayi9Yk9rux4llyqmo'
      }
    },
    mounted () {
      this.$nextTick(() => {
        let self = this
        MP(self.ak).then(BMap => {
          // 创建百度地图
          let map = new BMap.Map('mapInner', {enableMapClick: true})
          // 打开左上角和右上角的插件
          let top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT})
          let top_left_navigation = new BMap.NavigationControl()
          let mapType = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]})
          // 创建检索信息窗口的内容
          let content = `<div style="margin: 0; line-height: 20px; padding: 2px; height: auto;">地址:${self.houseInfo.location}</div>`
          // 创建检索信息窗口对象
          let searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
            title: self.houseInfo.name,
            panel: 'panel',
            enableAutoPan: true,
            searchTypes: [
              BMAPLIB_TAB_SEARCH,
              BMAPLIB_TAB_TO_HERE,
              BMAPLIB_TAB_FROM_HERE
            ]
          })
          // 创建地址解析器
          let geocoder = new BMap.Geocoder()
          // 解析地址并设为中心点
          geocoder.getPoint(self.houseInfo.location, (point) => {
            if (point) {
              let marker = new BMap.Marker(point)
              searchInfoWindow.open(marker)
              marker.addEventListener('click', function(e) {
                searchInfoWindow.open(marker)
              })
              map.enableScrollWheelZoom()
              map.addControl(top_left_control)
              map.addControl(top_left_navigation)
              map.addControl(mapType)
              map.centerAndZoom(point, 16)
              map.addOverlay(marker)
              marker.setAnimation(BMAP_ANIMATION_BOUNCE)
            } else {
              alert("您选择地址没有解析到结果!")
            }
          })
        })
      })
    }
  }
</script>

<style lang="less" scoped>
  * {
    box-sizing: inherit!important;
  }
  #mapInner {
    width: 100%;
    height: 100%;
  }
</style>
